import { Col, Descriptions, DescriptionsProps, Row } from 'antd'
import { useParams } from 'react-router-dom'
import Firefighting from './Firefighting'
import Units from './Units'
import AlarmCharts from './AlarmCharts'
import data from './data.json'
import Notification from './Notification'
import Firedrill from './Firedrill'
import RealTimeAlarm from './RealTimeAlarm'
import Certificate from './Certificate'
import Train from './Train'

import { useEffect, useState } from 'react'
import { enterpriseAPI } from '@/apis'

const Index = () => {
  const [enterprise, setEnterprise] = useState(null)
  const { id } = useParams()
  // const location = useLocation()

  const items: DescriptionsProps['items'] = [
    {
      key: '1',
      label: '公司名称',
      children: enterprise?.enterprise_name,
    },
    {
      key: '2',
      label: '面积',
      children: enterprise?.value ? `${JSON.parse(enterprise?.value || '{}')?.enterprise_area}平方米` : '未知',
    },
    {
      key: '3',
      label: '人员',
      children: `${data?.personnel}人`,
    },
    // {
    //   key: '4',
    //   label: '车辆',
    //   children: `${data?.vehicle}辆`,
    // },
    {
      key: '5',
      label: '公司画像',
      children: <Firefighting />,
    },
    {
      key: '6',
      label: '公司地址',
      children: data.address,
    },
  ]

  useEffect(() => {
    enterpriseAPI
      .getEnterpriseData({
        id: id,
        key: '/enterprise/list',
      })
      .then((res) => {
        const [data] = res.data || []
        setEnterprise(data)
      })
  }, [])

  return (
    <Row align="stretch" gutter={[12, 12]}>
      <Col span={24}>
        <Descriptions bordered column={{ xs: 1, sm: 2, md: 3, lg: 3, xl: 3, xxl: 3 }} title="企业概况" items={items} />
      </Col>

      <Col xs={24} xl={24}>
        <Row gutter={[12, 12]} style={{ height: '100%' }}>
          <Col span={12}>
            <AlarmCharts />
          </Col>
          <Col span={12}>
            <RealTimeAlarm />
          </Col>
        </Row>
      </Col>
      <Col xs={24} xl={8}>
        <Notification />
      </Col>
      <Col xs={24} xl={8}>
        <Train />
      </Col>
      <Col xs={24} xl={8}>
        <Firedrill />
      </Col>

      <Col xs={24} xl={24}>
        <Units />
      </Col>

      <Col xs={24} xl={24}>
        <Certificate />
      </Col>
    </Row>
  )
}

export default Index
